<!doctype html>
<html>
<head>
<meta name="keywords" content="甜爱，SweetLove,甜品，甜点，生日蛋糕，冰淇淋，冰品"/>
<meta name="description" content="甜爱网上商城是专注于甜品销售、进口的网站，各种甜品、甜点齐全，还有解暑的各种冰品任顾客挑选，让他们感受到爱的温馨。">
<meta charset="utf-8">
<title>我的订单~</title>
<link rel="shortcut icon" href="../images/小图标.jpg">
<link rel="stylesheet" href="../css/order.css">
<link rel="stylesheet" href="../css/header.css">
<link rel="stylesheet" href="../css/footer.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $(function () {
        $("#tabs").tabs();
        if (localStorage.getItem('currentUser')) {
            document.querySelector('h3').innerHTML = JSON.parse(localStorage.getItem('currentUser')).name
            document.querySelector('img').src =
                'http://localhost:3000/' + JSON.parse(localStorage.getItem('currentUser')).headPic
        }
        $.ajax({
            url: 'http://localhost:3000/api/getOrdersByUserId?userId=7',
            success: function (result) {
                var orders = result.data  //获取所有订单
                console.log('orders:', orders)
                var orders1 = [], orders2 = [] ,orders3 = []
                for (var i = 0; i < orders.length; i++) {
                    if (orders[i].status == 1) {
                        orders1.push(orders[i])
                    } else if(orders[i].status == 2) {
                        orders2.push(orders[i])
                    }else{
                        orders3.push(orders[i])
                    }
                }
                setOrder(orders1, '.orders1')
                setOrder(orders2, '.orders2')
                setOrder(orders3, '.orders3')
            }
        })
    });
    function setOrder(orders, option) {
        for (var i = 0; i < orders.length; i++) {
            var orderLi = document.createElement('li') //创建一个订单列表项
            var orderId = document.createElement('span')
            orderId.innerHTML = '订单编号：' + orders[i].order_id
            orderLi.appendChild(orderId)                //添加订单编号
            var orderTotalPrice = document.createElement('span')
            orderTotalPrice.innerHTML = '订单总金额：' + orders[i].all_price
            orderLi.appendChild(orderTotalPrice)                //添加订单总金额
            var orderTotalNum = document.createElement('span')
            orderTotalNum.innerHTML = '订单总数：' + orders[i].all_num
            orderLi.appendChild(orderTotalNum)                //添加订单总数量
            $(option).append(orderLi)                //添加订单到列表中
            //添加订单详情
            var order = document.createElement('ul')
            var items = orders[i].items     //获取某个订单中的所有订单详情集合
            var strHTML = ''
            for (var j = 0; j < items.length; j++) {
                strHTML += `
                            <li class='dtli'>
                                <span>商品名称:${items[j].title}</span>
                                <span>单价:${items[j].price}</span>
                                <span>数量:${items[j].num}</span>
                            </li>
                        `
            }
            order.innerHTML = strHTML
            $(option).append(order)
        }
    }
</script>
</head>

<body>
    <header>
        <div>
            <a href="../html/index.html"><img src="../images/login.png" alt=""></a>
            <form action="">
                <input type="text" value=""class="text">
                <input type="button" value="搜索" class="mybutton">
                </form>
            <ul class="tu">
                <li><span><a href="../html/index.html">首页</a></span></li>
                <li><span>蛋糕</span></li>
                <li><span>全国配</span></li>
                <li><span>合作专区</span>
                    <ul class="tul">
                        <li>银行活动</li>
                        <li>企业采购</li>
                        <li>大客户区</li>
                    </ul>
                </li>
                <li><span>立即兑换</span></li>
            </ul>
            <a href="../html/shoppingCar.html" class="d3"><i></i>购物车</a>
            <a href="../html/personal.html" class="d4">个人中心</a>  
        </div>
    </header>
    <div id="contentCon">
        <div class="left">
            <div></div>
            <p>hmx</p>
            <span></span>
            <ul>
                <li><a href="../html/personal.html">个人信息</a></li>
                <li><a href="#" class="my">我的订单</a></li>
                <!-- <li><a href="#">我的钱包</a></li> -->
                <li><a href="#">优惠特权</a></li>
                <li><a href="address.html">地址管理</a></li>
                <li><a href="#">账号设置</a></li>
                <li><a href="#">我的足迹</a></li>
                <li><a href="../html/Service.html">帮助中心</a></li>
            </ul>
        </div>
        <!-- <div class="right">
            <ul>
                <li class="all">全部订单</li>
                <li>待付款</li>
                <li>已发货</li>
                <li>待评价</li>
                <li> <a href="../html/Service.html">售后服务</a></li>
            </ul>
            <ol>
                <input type="checkbox">
                <p>2021-9-22&nbsp;&nbsp;&nbsp;&nbsp;订单号：124534645747</p>
                <a href="#" id="shanchu"></a>
            </ol>
            <div>
                <li></li>
                <ul>
                    <li>
                        <p>雪域牛乳芝士</p>
                        <span>净含量：800克</span>
                    </li>
                    <li class="price">¥160.00</li>
                    <li class="price">x1</li>
                    <li>
                        <a href="#">联系我们</a>
                        <a href="../html/Service.html" class="text02">申请售后</a>
                    </li>
                    <li>
                        <a href="#">订单详情</a>
                        <a href="#" class="text02">查看物流</a>
                    </li>
                </ul>
            </div>
             <ol>
                <input type="checkbox">
                <p>2021-9-12&nbsp;&nbsp;&nbsp;&nbsp;订单号：124537468977</p>
                <a href="#" id="shanchu"></a>
            </ol>
            <div>
                <li class="pic02"></li>
                <ul>
                    <li>
                        <p>多肉青提</p>
                        <span>净含量：500克</span>
                    </li>
                    <li class="price">¥130.00</li>
                    <li class="price">x1</li>
                    <li>
                        <a href="#">联系我们</a>
                        <a href="#" class="text02">申请售后</a>
                    </li>
                    <li>
                        <a href="#">订单详情</a>
                        <a href="#" class="text02">查看物流</a>
                    </li>
                    <a href="#">评价</a>
                </ul>
            </div>
            <ol>
                <input type="checkbox">
                <p>2021-8-25&nbsp;&nbsp;&nbsp;&nbsp;订单号：680945239418</p>
                <a href="#" id="shanchu"></a>
            </ol>
            <div>
                <li class="pic03"></li>
                <ul>
                    <li>
                        <p>云朵茫茫</p>
                        <span>净含量：800克</span>
                    </li>
                    <li class="price">¥200.00</li>
                    <li class="price">x1</li>
                    <li>
                        <a href="#">联系我们</a>
                        <a href="#" class="text02">申请售后</a>
                    </li>
                    <li>
                        <a href="#">订单详情</a>
                        <a href="#" class="text02">查看物流</a>
                    </li>
                    <a href="#">评价</a>
                </ul>
            </div>
        </div> -->
        <div class="right">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">全部</a></li>
                <li><a href="#tabs-2">已付款</a></li>
                <li><a href="#tabs-3">待付款</a></li>
            </ul>
            <div id="tabs-1" >
                <ul class="orders1">
                </ul>
            </div>
            <div id="tabs-2">
                <ul class="orders2">
    
                </ul>
            </div>
            <div id="tabs-3">
                <ul class="orders3">
                </ul>
            </div>
        </div>
    </div>
        <ol>
            <a href="#" id="left"><li>&lt;</li></a>
            <a href="#" id="NO1"><li>1</li></a>
            <a href="#"><li>2</li></a>
            <a href="#"><li>3</li></a>
            <a href="#"><li>...</li></a>
            <a href="#"><li>10</li></a>
            <a href="#" id="right"><li>&gt;</li></a>
        </ol>
        
    <!-- </div> -->
    
</body>
<footer>
    <div class="footer">
        <img class="footer-logo" src="../images/logo.png" height="23" width="200" alt="">
        <div class="footer-nav">
            <a>诺心公告</a>
            <span>|</span>
            <a>关于诺心</a>
            <span>|</span>
            <a>客服服务</a>
            <span>|</span>
            <a>生产经营资质</a>
            <span>|</span>
            <a>公告专区</a>
        </div>
        <div class="footer-icon">
            <a href="http://weibo.com/21cake" target="_blank">
                <img src="../images/footericon-01.png">
            </a>
            <a class="footer-weixin">
                <div class="footer-erweima footer-weixin-erweima">
                    <img src="../images/erweima.png">
                </div>
                <img src="../images/footericon-02.png">
            </a>
            <a class="footer-app">
                <div class="footer-erweima footer-app-erweima">
                    <img src="../images/erweima.png">
                </div>
                APP
            </a>
        </div>

        <div class="footer-text">
            <span>订购专线：4001-578-578（服务时间 09:00–21:00）</span>
            <span>客服电话：021-23099721（全国） | services@lecake.com（邮箱）</span>
            <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核） </span>
            <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
            <span>网站注册公司名称: 诺心食品（上海）有限公司  地址: 上海市徐汇区虹漕路68号锦和中心7楼A、C单元 </span>
        </div>
        <div class="footer-copyright">
            <span>Copyright© 诺心leCake蛋糕官网商城 2010-2022, 版权所有 <a style="color: #9a9a9a" target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">沪ICP备10211730号-2</a></span>
        </div>
    </div>
</footer>
</body>
</html>
